<template>
  <!-- <div style="text-align:center,background-color:#6699cc;height:75px;">
    <div style="width=!00%;height:20px"></div>
    <p class="h4" align="center" style="vertical-align:middle;"><b>系统设置</b></p>
  </div> -->
  <tools-page :need-back='false' title="系统设置"></tools-page>
  <div align="center">
    <http-busy>
      <validator name='v'>
          <div class="app-input lala" :class="{'has-error':$v.oldpassword.required, 'has-success': !$v.oldpassword.required}">
            <label class="control-label">原始密码</label>
            <input type="password" v-model="oldPassword"  v-validate:oldpassword="{ required: true }">
            <span v-if="$v.oldpassword.required">不能为空</span>
          </div>
          <div class="app-input lala"
          :class="{'has-error':$v.password.required, 'has-success': !$v.password.required}">
            <label class=" control-label">新密码</label>
            <input type="password"  v-model="password"  v-validate:password='{ required: true }'>
            <span v-if="$v.password.required">不能为空</span>
          </div>
          <div class="app-input lala"
          :class="{'has-warning':$v.password2.required,'has-error':$v.password2.equalValid && !($v.password2.required),
          'has-success': !$v.password2.required && !($v.password2.equalValid && !($v.password2.required))}">
            <label class=" control-label">确认密码</label>
            <input type="password" v-model="password2"  v-validate:password2="{ required: true, equalValid: password }">
            <!-- <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))"></span> -->
            <span v-if="$v.password2.required">不能为空</span>
            <span v-if="$v.password2.equalValid && !($v.password2.required)">两次密码不一致 !!</span>
          </div>
          <div class="row app-btn" style="margin-bottom: -5px;">
            <button class="btn btn-primary col-xs-12" @click= "changePass()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>修改密码</button>
            <!-- <button class="btn btn-primary col-xs-6" @click="this.$back()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>取消</button> -->
          </div>
        <!-- <form>
          <div class="form-group">
            <label class="col-sm-1 control-label">原密码：</label>
            <div class="col-sm-12">
              <input class="form-control" type="password" v-model="oldPassword"  v-validate:oldPassword='{ required: true }' required maxlength="18" placeholder="请输入原密码">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-1 control-label">新密码：</label>
            <div class="col-sm-12">
              <input class="form-control" type="password" v-model="password" v-validate:password='{ required: true }' maxlength="18" placeholder="可包含字母、数字、下划线">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-1 control-label">确认密码：</label>
            <div class="col-sm-12">
              <input class="form-control" type="password" v-model="password2" v-validate:password2='{ required: true }' maxlength="18" placeholder="请重复输入密码">
            </div>
          </div>
          <div class="form-group">
            <button :disabled="!$v.valid || this.password != this.password2" class="btn btn-default" type="button" @click="changePass">修改密码</button>
          </div>
        </form> -->
      </validator>
        <!-- <div class="form-group">
          <button class="btn btn-default" type="button" @click="updateParam">更新参数</button>
        </div> -->
    </http-busy>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '系统设置',
  data() {
    return {
        oldPassword: null,
        password: null,
        password2: '',
        user : Vue.user
    }
  },
  methods: {
    changePass() {
      this.$post(Vue.url + 'logic/修改密码', {data:{id: this.user.id, oldPass : this.oldPassword, newPass: this.password}}, {resolveMsg: null, rejectMsg: null}).then(
        (response) => {
          HostApp.alert("修改密码成功。")
        }
      ).catch(
          (response) => {
            HostApp.alert('修改密码失败。')
          }
        )
    },
    callback(result) {
      if(!Vue.param)
        Vue.param = {}
      result = result.data.data
      result.forEach(function(param) {
        let key = param['name']
        //console.log(key)
        Vue.param[key] = param['f_paramvalues']
        //console.log(JSON.stringify(param['f_paramvalues']))
      })
      HostApp.__callback__ = null
    },
    updateParam() {
      HostApp.__callback__ = this.callback
      if(Vue.android) {
          HostApp.simpleTask({type:'logic', callback: 'javascript:HostApp.__callback__(%s);', hint: ['正在更新参数，请稍等...', '参数更新成功！', '参数更新失败！'], data: {alias:'更新参数', data: {action: 'post', url: Vue.url + 'db/hql', data: 'select distinct p from t_parameter p left join fetch p.f_paramvalues'}}})
      }
    }
  }
}
</script>
<style scoped>
  .lala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
  }
  .lala label {
    width: 100px;
    text-align: right;
  }
  .lala input {
    flex: 1;
    width: 1px;
  }
  .lala span {
    white-space: nowrap;
    color: red;
  }
</style>
